<template>
<div>
   <Home-header></Home-header>
   <Home-Swiper :list="swiperlist"></Home-Swiper>
   <Home-Icons :list="icoslist"></Home-Icons>
   <Home-Recomd :list="remcomedlist"></Home-Recomd>
   <Home-Weeke :list="weekelist"></Home-Weeke>
</div>
</template>
<script>
import {mapState} from 'vuex'
import HomeHeader from './componts/Header.vue'
import HomeSwiper from './componts/swiper.vue'
import HomeIcons from './componts/icos.vue'
import HomeRecomd from './componts/recommed.vue'
import HomeWeeke from './componts/weeke.vue'
import axios from 'axios'
export default {
 name: 'Home',
 components:{
   HomeHeader,
   HomeSwiper,
   HomeIcons,
   HomeRecomd,
   HomeWeeke
 },
 data () {
   return {
   swiperlist:[],
   icoslist:[],
   remcomedlist:[],
   weekelist:[],
   lastcity:''
   }
 },
 computed:{
   ...mapState(['city'])
 },
 methods:{
   getHomeInfo(){
     axios.get('/api/index.json?city='+ this.city)
     .then(this.getsucc)
   },
   getsucc (res) {
     res=res.data
     if (res.ret && res.data) {
       const data=res.data
       this.swiperlist=data.swiperList
       this.icoslist=data.iconList
       this.remcomedlist=data.recommendList
       this.weekelist=data.weekendList
     }
   }
 },
   mounted(){
    this.lastCity=this.city//第一次的城市保存
   this.getHomeInfo();
  },
  activated () {//当用keep-alive时，组件里会多出这个生命周期函数，页面重新被显示时会执行
    if(this.lastCity !== this.city ){//当这次的城市与上一次的城市不相等时，再次发送请求
    this.lastCity=this.city
     this.getHomeInfo();
    }
  }

}
</script>

